<template>
  <view>
    <view class="uni-header">
      <uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
    </view>
    
    <view class="uni-container">
      <uni-tabs :list="groupList" v-model:current="condition.groupId" @clickTab="getConfigList" @action="action"
        :actionTab="actionTab" :actionText="actionText" />

      <uni-forms label-align="center" ref="form" style="margin-top: 30px;">
        <uni-forms-item labelWidth="200px" v-for="(item,key) in configList" :key="key" :name="item.name"
          :label="item.title + '：'">
          <uni-easyinput v-if="item.type == 'input'" v-model="item.value" trim="both" :clearable="false" />
          <uni-easyinput v-if="item.type == 'textarea'" type="textarea" v-model="item.value" trim="both" />
          <view v-if="item.type == 'switch'" style="display: flex;align-items: center;">
            <switch :checked="switchChecked(item.value)" @change="changeSwitch($event, item)" />
            <text v-html="getSwitchItemValueName(item)"></text>
          </view>

          <uni-data-checkbox v-if="item.type == 'radio'" v-model="item.value"
            :localdata="dataSelectAdapter(item.options)" />
          <uni-data-checkbox v-if="item.type == 'checkbox'" multiple v-model="item.value"
            :localdata="dataCheckboxAdapter" />
          <uni-data-select v-if="item.type == 'select'" v-model="item.value"
            :localdata="dataSelectAdapter(item.options)" :clear="false" />
          <uni-easyinput v-if="item.type == 'hidden'" v-model="item.value" />
          <unify-source-picker :adapter="sourcePickerAdapter" v-model="item.value" v-if="item.type == 'image'"
            limit="1" />
          <uni-file-picker v-if="item.type == 'file'" file-mediatype="all" limit="1" />
          <uni-datetime-picker v-if="item.type == 'date'" type="date" :clear-icon="false" v-model="item.value"
            @maskClick="changeDateTime($event, 'date', item)" />
          <uni-datetime-picker v-if="item.type == 'datetime'" type="datetime" :clear-icon="false" v-model="item.value"
            @maskClick="changeDateTime($event, 'datetime', item)" />
          <picker v-if="item.type == 'time'" mode="time" :value="item.value" start="09:01" end="21:01"
            @change="changeTime($event, item)" />

          <view class="uni-form-item-tips">
            <text v-if="item.tips">{{item.tips}} </text>
            <br> 调用方式
            <text style="color: red;">config('{{groupName}}.{{item.name}}')</text>
          </view>
        </uni-forms-item>
        <view class="uni-button-group">
          <button type="primary" class="uni-button" style="width: 100px;"
            @click="submitForm">{{$t('common.button.submit')}}</button>
        </view>
      </uni-forms>
    </view>
  </view>

  <fix-window />

</template>

<script>
  import {
    mapActions
  } from "vuex"
  export default {
    data() {
      return {
        condition: {},
        groupList: [],
        configList: [],
      }
    },
    async onLoad() {
      await this.buildPage();
      await this.getConfigList()
    },
    computed: {
      groupName() {
        let name = "";
        this.groupList.forEach(group => {
          if (group.value == this.condition.groupId) {
            name = group.realName
          }
        });
        return name;
      }
    },
    methods: {
      ...mapActions('config', ['form', 'list', 'setValues']),
      sourcePickerAdapter(arr) {
        return arr.join(",")
      },
      async buildPage() {
        let data = await this.form()

        this.groupList = []
        data.groupList.forEach(item => {
          this.groupList.push({
            value: item.id,
            realName: item.name,
            name: item.title
          });
        });
        this.condition.groupId = this.groupList[0].value;
      },
      async getConfigList() {
        uni.showLoading({
          mask: true
        })
        this.configList = (await this.list({
          groupId: this.condition.groupId
        })).list

        uni.hideLoading()
      },
      submitForm() {

        let data = [];
        this.configList.forEach(item => {
          data.push({
            id: item.id,
            title: item.title,
            type: item.type,
            value: item.value
          });
        });

        this.setValues({
          data
        }).then(res => {
          uni.showToast({
            title: "操作成功",
            mask: true,
          })
        })
      },
      switchChecked(value) {
        if (value == 1) {
          return true;
        }

        return false;
      },
      getSwitchOptionsList(item) {
        let options = []
        item.options.split('\n').forEach(str => {
          let result = str.split(":")
          options[result[0]] = result[1];
        });
        return options;
      },
      changeSwitch(e, item) {
        let options = this.getSwitchOptionsList(item);
        let index = 0;
        if (e.detail.value) {
          index = 1
        }
        item.value = index
      },
      dataCheckboxAdapter(str) {
        let options = {}
        item.options.split('\n').forEach(str => {
          let result = str.split(":");
          options[result[0]] = result[1];
        });

        return options;
      },
      getSwitchItemValueName(item) {
        let options = this.getSwitchOptionsList(item);
        return options[item.value];
      },
      dataSelectAdapter(optionsStr) {
        let options = []
        optionsStr.split('\n').forEach(str => {
          let result = str.split(":");
          options.push({
            text: result[1],
            value: result[0]
          })
        });

        return options;
      }
    }
  }
</script>